<!--上传文件公共组件-->
<template>
    <div>
        <div class='detail-img-style'>
          <img
            class="img-show"
            v-if="fileObj != null && fileType == 1"
            style="cursor: pointer;"
            :src="fileObj.url"
            alt=""
            @click="previewImg"
          />

          <a-upload
            v-else
            :multiple="false"
            :customRequest="(action) => customRequestFun(action,uploadObj.dir)"
            :beforeUpload="uploadObj.beforeUploadFun"
            list-type="picture"
            :default-ile-list="fileList"
            @change="(info) => handleChange(info, '1')"
          >
            <a-button>
              <a-icon type="upload" />
              {{ uploadObj.butName }}
            </a-button>
          </a-upload>
        <!--预览图片-->
          <a-modal
            :visible="previewVisible"
            :footer="null"
            title=""
            @cancel="handleCancel"
          >
             <img v-if="fileObj != null && fileType == 1" alt="example" class="license-img" style="cursor: pointer;width: 100%;" :src="fileObj.url" :preview="0">
          </a-modal>
      </div>
      <div>支持格式：jpg,png,jpeg,单个文件不能超过5MB</div>
    </div>
</template>

<script>
import {customRequest} from '@/common/upload'
export default {
  name: 'uploadFiles',
  components: {customRequest},
  props:['uploadObj'],
  data() {
    return {
      fileObj:null,
      fileList:[],
      url:null,
      lockType:false,
      fileType: 1,    //1图片  2文件
      previewVisible: false
    }
  },
  updated() {
    if(this.lockType){
      this.ocrDistinguishFun()
    }
  },
  methods:{
    //oss上传图片
    customRequestFun(action, dir) {
      customRequest(action,dir,this)
    },
    //回传参数
    ocrDistinguishFun(){
      this.$emit('uploaded',this.fileObj);
    },
    //上传输出方法
    beforeUploadFun(file){
      if(this.beforeUploadStr=='beforeUploadImg'){
        this.fileType = 1;
        this.beforeUpload(file);
      }else if (this.beforeUploadStr=='beforeUploadPdf'){
        this.fileType = 2;
        this.beforeUploadFDF(file);
      }
    },
    //图片限制
    beforeUpload(file) {
      const isJpgOrPng = file.type === 'image/jpg' || file.type === 'image/png' || file.type === 'image/jpeg'
      if (!isJpgOrPng) {
        this.$message.error('只允许上传jpg,jpeg,png格式的图片')
      }
      const isLt10M = file.size / 1024 / 1024 < 5
      if (!isLt10M) {
        this.$message.error('图片最大5MB!')
      }
      if (isJpgOrPng && isLt10M) {
      }
      return isJpgOrPng && isLt10M
    },
    //文件
    beforeUploadFile(file) {
      const isLt10M = file.size / 1024 / 1024 < 10
      const isJpgOrPng =
        file.type === 'application/pdf' ||
        file.type === 'image/jpg' ||
        file.type === 'image/png' ||
        file.type === 'image/jpeg'
      if (!isJpgOrPng) {
        this.$message.error('只允许上传pdf,jpg,jpeg,png格式文件')
      }
      if (!isLt10M) {
        this.$message.error('文件最大10MB!')
      }
      if (isJpgOrPng && isLt10M) {
      }
      return isJpgOrPng && isLt10M
    },
    //pdf
    beforeUploadFDF(file) {
      const isLt10M = file.size / 1024 / 1024 < 10
      const isJpgOrPng = file.type === 'application/pdf'
      if (!isJpgOrPng) {
        this.$message.error('只允许上传pdf格式文件')
      }
      if (!isLt10M) {
        this.$message.error('文件最大10MB!')
      }
      if (isJpgOrPng && isLt10M) {
      }
      return isJpgOrPng && isLt10M
    },
    handleChange(info,type) {
        let fileList = [...info.fileList];

        fileList = fileList.map(file => {
          if (file.response) {
            // Component will show file.url as link
            file.url = file.response.url;
          }
          return file;
        })

      if (info.file.status === 'uploading') {
        this.loading = true
      }
      if (info.file.status === 'done') {
        this.loading = false;
      }
    },
    previewFile(file) {
      console.log('Your upload file:', file)
      window.open(file.response.url, '_blank')
    },
    //预览图片
    previewImg(){
      this.previewVisible = true;
    },
    handleCancel(){
      this.previewVisible = false;
    }
  }
}
</script>

<style scoped>
.detail-img-style{
  width: 334px;
  height: 224px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #ccc;
  border-radius: 2px;
  overflow: hidden;
  cursor: pointer;
  box-sizing: border-box;
  padding: 26px;
}
.detail-img-style img{
  height: auto;
  width: auto;
  max-width: 308px;
  max-height: 208px;
  text-align: center;
}
/deep/.ant-upload-list-item{
  display: none;
}


.license-img{
  margin-top: 20px;
}
</style>
